<template>
    <div class="main">
        <div class="left">
            <div class="h1">存梁区</div>
            <div class="main1">
                <div class="cunliang">
                    <div>
                        <div class="cunliang1">
                            <div class="cunliang2"></div>
                            <div>占用</div>
                        </div>
                        <div class="cunliang1">
                            <div class="cunliang3"></div>
                            <div>空闲</div>
                        </div>
                    </div>
                    <div class="cunliang4">全部座位 {{ count_All2 }}</div>
                    <div class="cunliang4">占用 {{ count_Zy2 }}</div>
                    <div class="cunliang4">空闲 {{ count_Kx2 }}</div>
                </div>
                <div class="auto" v-if="CunliangList1 == ''">
                    <img src="../../assets/img/zanwu.png" alt="" srcset="" />
                </div>
                <!-- 存梁区 -->
                <div id="schart5">
                    <div class="liebiaoLeft">
                        <div class="liebiaoLeft1" v-for="(item, index) in CunliangList1" :key="index">
                            <div v-if="item.state === '2'">
                                <div class="liebiao2">
                                    <div class="cunliang2"></div>
                                    <div class="gx" style="">压降工序</div>
                                </div>
                                <div class="liebiaoLeft4">{{ item.girder_name_one }}</div>
                            </div>
                            <div v-else-if="item.state == '1'">
                                <div class="liebiao2">
                                    <div class="cunliang2"></div>
                                    <div class="gx">张拉工序</div>
                                </div>
                                <div class="liebiaoLeft4">{{ item.girder_name_one }}</div>
                            </div>
                            <div v-else-if="item.state == '3'">
                                <div class="liebiao2">
                                    <div class="cunliang2"></div>
                                    <div class="gx">养护工序</div>
                                </div>
                                <div class="liebiaoLeft4">{{ item.girder_name_one }}</div>
                            </div>
                            <div v-else-if="item.state == '0'">
                                <div class="liebiao2">
                                    <div class="zhiliang3"></div>
                                    <div class="gx">空闲</div>
                                </div>
                                <div class="liebiaoLeft5">{{ item.girder_name_one }}</div>
                            </div>

                            <div class="liebiaoLeft3">
                                <div v-if="item.state_one == '2'">
                                    <div class="liebiao2">
                                        <div class="cunliang2"></div>
                                        <div class="gx">压降工序</div>
                                    </div>
                                    <div class="liebiaoLeft4">{{ item.girder_name_one }}</div>
                                </div>
                                <div v-else-if="item.state_one == '1'">
                                    <div class="liebiao2">
                                        <div class="cunliang2"></div>
                                        <div class="gx">张拉工序</div>
                                    </div>
                                    <div class="liebiaoLeft4">{{ item.girder_name_one }}</div>
                                </div>
                                <div v-else-if="item.state_one == '3'">
                                    <div class="liebiao2">
                                        <div class="cunliang2"></div>
                                        <div class="gx">养护工序</div>
                                        <div class="liebiaoLeft4">{{ item.girder_name_one }}</div>
                                    </div>
                                </div>
                                <div v-else>
                                    <div class="liebiao2">
                                        <div class="zhiliang3"></div>
                                        <div class="gx">空闲</div>
                                    </div>
                                    <div class="liebiaoLeft5">{{ item.girder_name_one }}</div>
                                </div>
                                <!-- <div class="liebiaoLeft5">{{ item.girder_name_two }}</div> -->
                                <div>{{ item.storage_pedestal }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="right">
            <div class="h1">制梁区</div>
            <div class="second">
                <div class="zhiliang">
                    <div>
                        <div class="zhiliang1">
                            <div class="zhiliang2"></div>
                            <div>占用</div>
                        </div>
                        <div class="zhiliang1">
                            <div class="zhiliang3"></div>
                            <div>空闲</div>
                        </div>
                    </div>
                    <div class="zhiliang4">全部座位{{ count_All }}</div>
                    <div class="zhiliang4">占用 {{ count_Zy }}</div>
                    <div class="zhiliang4">空闲 {{ count_Kx }}</div>
                </div>
   <div class="auto" v-if="ZhiliangList1 == ''">
                    <img src="../../assets/img/zanwu.png" alt="" srcset="" />
                </div>
                <div id="schart4">
                    <div class="liebiao">
                        <div class="liebiao1" v-for="(item, index) in ZhiliangList1" :key="index">
                            <div v-if="item.state == '1'">
                                <div class="liebiao2">
                                    <div class="zhiliang2"></div>
                                    <div class="gx">钢筋工序</div>
                                </div>
                                <div class="lianghao">
                                    <div class="lianghao1">{{ item.manufacture_pedestal }}</div>
                                    <div class="lianghao2">{{ item.girder_name }}</div>
                                </div>
                            </div>
                            <div v-else-if="item.state == '0'">
                                <div class="liebiao2">
                                    <div class="zhiliang3"></div>
                                    <div class="gx">空闲</div>
                                </div>
                                <div class="lianghao">
                                    <div class="lianghao3">{{ item.manufacture_pedestal }}</div>
                                </div>
                            </div>
                            <div v-if="item.state == '2'">
                                <div class="liebiao2">
                                    <div class="zhiliang2"></div>
                                    <div class="gx">混凝土工序</div>
                                </div>
                                <div class="lianghao">
                                    <div class="lianghao1">{{ item.manufacture_pedestal }}</div>
                                    <div class="lianghao2">{{ item.girder_name }}</div>
                                </div>
                            </div>
                            <div v-if="item.state == '3'">
                                <div class="liebiao2">
                                    <div class="zhiliang2"></div>
                                    <div class="gx">模板工序</div>
                                </div>
                                <div class="lianghao">
                                    <div class="lianghao1">{{ item.manufacture_pedestal }}</div>
                                    <div class="lianghao2">{{ item.girder_name }}</div>
                                </div>
                            </div>
                            <div v-if="item.state == '4'">
                                <div class="liebiao2">
                                    <div class="zhiliang2"></div>
                                    <div class="gx">张拉工序</div>
                                </div>
                                <div class="lianghao">
                                    <div class="lianghao1">{{ item.manufacture_pedestal }}</div>
                                    <div class="lianghao2">{{ item.girder_name }}</div>
                                </div>
                            </div>

                            <div v-if="item.state == '5'">
                                <div class="liebiao2">
                                    <div class="zhiliang2"></div>
                                    <div class="gx">养护工序</div>
                                </div>
                                <div class="lianghao">
                                    <div class="lianghao1">{{ item.manufacture_pedestal }}</div>
                                    <div class="lianghao2">{{ item.girder_name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="h2">钢筋绑扎区</div>
            <div class="second">
                <div class="zhiliang">
                    <div>
                        <div class="zhiliang1">
                            <div class="bangzha"></div>
                            <div>占用</div>
                        </div>
                        <div class="zhiliang1">
                            <div class="zhiliang3"></div>
                            <div>空闲</div>
                        </div>
                    </div>
                    <div class="zhiliang4">全部座位{{ count_All1 }}</div>
                    <div class="zhiliang4">占用 {{ count_Zy1 }}</div>
                    <div class="zhiliang4">空闲 {{ count_Kx1 }}</div>
                </div>
                   <div class="auto" v-if="CountList == ''">
                    <img src="../../assets/img/zanwu.png" alt="" srcset="" />
                </div>
                <div id="schart4">
                    <div class="liebiao">
                        <div class="liebiaoRight" v-for="(item, index) in CountList" :key="index">
                            <div v-if="item.state == '1'">
                                <div class="liebiao2">
                                    <div class="bangzha"></div>
                                    <div class="gx">占用</div>
                                </div>
                                <div class="lianghaoa">
                                    <div class="liebiaoRight1">{{ item.rebar_name }}</div>
                                    <div class="lianghao2a">{{ item.girder_name }}</div>
                                </div>
                            </div>
                            <div v-else-if="item.state == '0'">
                                <div class="liebiao2">
                                    <div class="zhiliang3"></div>
                                    <div class="gx">空闲</div>
                                </div>
                                <div class="lianghaoa">
                                    <div class="lianghao4">{{ item.rebar_name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ajax from '@/utils/myajax';

export default {
    data() {
        return {
            ZhiliangList1: [],
            CountList: [],
            CunliangList1: [],
            count_All: '',
            count_Kx: '',
            count_Zy: '',
            count_All1: '',
            count_Kx1: '',
            count_Zy1: '',
            count_All2: '',
            count_Kx2: '',
            count_Zy2: ''
        };
    },
    methods: {
        ZhiliangList() {
            ajax('ManufactureGirder/CountList', { section_id: localStorage.getItem('section_id') }, (data) => {
                this.count_All = data.count_All;
                this.count_Kx = data.count_Kx;
                this.count_Zy = data.count_Zy;
            });
        },

        ZhiliangList2() {
            ajax('ManufactureGirder/FindManufactureGirder', { section_id: localStorage.getItem('section_id') }, (data) => {
                console.log(data);
                setTimeout(() => {
                    this.ZhiliangList1 = data;
                }, 200);
            });
        },
        CunliangList() {
            ajax('StorageGirder/CountList', { section_id: localStorage.getItem('section_id') }, (data) => {
                console.log(data);
                this.count_All2 = data.count_All;
                this.count_Kx2 = data.count_Kx;
                this.count_Zy2 = data.count_Zy;
            });
        },

        CunliangList2() {
            ajax('StorageGirder/FindStorageGirder', { section_id: localStorage.getItem('section_id') }, (data) => {
                console.log('存梁区', data);
                this.CunliangList1 = data;
                console.log();
            });
        },
        CountList1() {
            var me = this;

            ajax('Rebar/CountList', { section_id: localStorage.getItem('section_id') }, (data) => {
                console.log(data);
                this.count_All1 = data.count_All;
                this.count_Kx1 = data.count_Kx;
                this.count_Zy1 = data.count_Zy;
            });
        },
        CountList2() {
            ajax('Rebar/FindRebar', { section_id: localStorage.getItem('section_id') }, (data) => {
                console.log(data);
                this.CountList = data;
            });
        }
    },

    mounted() {
        this.ZhiliangList();
        this.ZhiliangList2();
        this.CunliangList();
        this.CunliangList2();
        this.CountList1();
        this.CountList2();
    }
};
</script>
<style scoped>
#schart5 {
    margin-top: 25px;
    float: left;
    margin-left: 4px;
    width: 100%;
    height: 700px;
    overflow-x: hidden;
    overflow-y: scroll;
}

#schart4 {
    width: 100%;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.main {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: 10px;
}

.main1 {
    width: 1306px;
    height: 830px;
    opacity: 0.7;
    background: #010d2c;
    border: 1px solid #038bff;
    border-radius: 41px;
}

.h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: left;
    color: #effeff;
}

.h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    font-size: 30px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: left;
    color: #effeff;
}

.second {
    width: 550px;
    height: 381px;
    opacity: 0.7;
    background: #010d2c;
    border: 1px solid #038bff;
    border-radius: 41px;
}

.zhiliang {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin: 10px 30px;
}

.zhiliang1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.zhiliang2 {
    width: 17px;
    height: 17px;
    opacity: 1;
    background: #01ff8a;
    border: 1px solid #00fcff;
    border-radius: 100%;
    margin-right: 5px;
}

.zhiliang3 {
    width: 17px;
    height: 17px;
    opacity: 1;
    background: #010b26;
    border: 1px solid #00fcff;
    border-radius: 100%;
    margin-right: 5px;
}

.zhiliang4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 111px;
    height: 28px;
    opacity: 1;
    background: #010b26;
    border: 1px solid #01f0ff;
    border-radius: 6px;
}

.liebiao {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: 30px;
    color: #fff;
}

.liebiao1 {
    width: 21%;
    margin-top: 5px;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
}

.lianghao {
    width: 117px;
    height: 42px;
    opacity: 1;
    background: #010d2c;
    border: 1px solid #01f0ff;
    margin-top: 5px;
    color: #fff;
}

.liebiao2 {
    color: #fff;
    display: flex;
}

.lianghao1 {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 21px;
    background: #01ff8a;
    font-size: 12px;
}

.lianghao2 {
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 21px;
    opacity: 1;
    background: #010d2c;
}

.lianghao2a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    opacity: 1;
    background: #010d2c;
}

.lianghao3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 117px;
    height: 42px;
    font-size: 12px;
}

.lianghao4 {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 42px;
    font-size: 12px;
    text-align: center;
}

.cunliang {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    margin-left: 350px;
    margin-top: 15px;
    color: #fff;
}

.cunliang1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.cunliang2 {
    width: 17px;
    height: 17px;
    opacity: 1;
    background: #ff7e00;
    border: 1px solid #00fcff;
    border-radius: 100%;
    margin-right: 5px;
}

.cunliang3 {
    width: 17px;
    height: 17px;
    opacity: 1;
    background: #010b26;
    border: 1px solid #00fcff;
    border-radius: 100%;
    margin-right: 5px;
}

.cunliang4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 111px;
    width: 152px;
    height: 33px;
    opacity: 1;
    background: #010b26;
    border: 1px solid #01f0ff;
    border-radius: 6px;
}

.liebiaoLeft {
    display: flex;
    height: 88%;
    flex-wrap: wrap;
    margin-left: 20px;
    color: #fff;
    align-content: stretch;
}

.liebiaoLeft1 {
    width: 8.3%;
    opacity: 1;
    background: #010d2c;
    font-size: 12px;
    margin-top: 5px;
    color: #fff;
}

.liebiaoLeft3 {
    margin-top: 3px;
}

.liebiaoLeft4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 22px;
    opacity: 1;
    background: #ff7e00;
    border: 1px solid #00fcff;
    border-radius: 6px;
    margin-bottom: 2px;
}

.liebiaoLeft5 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 22px;
    opacity: 1;
    background: #010d2c;
    border: 1px solid #00fcff;
    border-radius: 6px;
    margin-bottom: 2px;
}

.gx {
    font-size: 13px;
    font-weight: Normal;
    text-align: left;
    color: #effeff;
}

.bangzha {
    width: 17px;
    height: 17px;
    opacity: 1;
    background: #3887fe;
    border: 1px solid #00fcff;
    border-radius: 100%;
    margin-right: 5px;
}

.liebiaoRight {
    width: 28%;
    opacity: 1;
    background: #010d2c;
    font-size: 10px;
    margin-top: 5px;
    margin-left: 25px;
    color: #fff;
}

.lianghaoa {
    width: 140px;
    height: 42px;
    opacity: 1;
    background: #010d2c;
    border: 1px solid #01f0ff;
    margin-top: 5px;
    color: #fff;
}

.liebiaoRight1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    height: 21px;
    opacity: 1;
    background: #3887fe;
}

/* 滚动条宽度 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    -moz-border-radius: 5px;
}

/* 滚动条轨道颜色 */
::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb:vertical {
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 12px;
    /*background-color: #BDBDBD;*/
    -webkit-border-radius: 6px;
}

/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
    background-color: #68b7d6;
}

/* 鼠标移动到滚动条上后显示的颜色 */
::-webkit-scrollbar-thumb:hover {
    background-color: #009ffb;
}

/* 点击时滚动条的颜色 */
::-webkit-scrollbar-thumb:active {
    background-color: #5c99d3;
}
.auto{
    width: 400px;
    margin: 40px auto;
}
</style>